<template>
  <div>
    <!-- 页头 -->
    <el-card class="header">
      <el-page-header @back="goBack" content="新建一个商户"> </el-page-header>
    </el-card>
    <el-card style="margin: 20px">
         <div slot="header">基础信息</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="400px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="所有人" prop="owner">
          <el-input
            v-model="ruleForm.owner"
            placeholder="请选择列表中或者输入搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="商户状态" prop="state">
          <el-input
            v-model="ruleForm.state"
            placeholder="请选择列表中或者输入搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="平台" prop="resource">
          <el-input
            v-model="ruleForm.resource"
            placeholder="双链生鲜供应链平台(p000001)"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button type="danger" @click="goBack" >放弃</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Create",
  data() {
    return {
      showList: [],
      ruleForm: {
        name: "阿迪达斯",
        owner: "王强",
        state: "营业中",
        resource: "双链生鲜供应链平台(p000001)",
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        owner: [{ required: true, message: "请输入所有人", trigger: "blur" }],
        state: [{ required: true, message: "请输入商户状态", trigger: "blur" }],
        resource: [{ required: true, message: "请输入平台", trigger: "blur" }],
      },
    };
  },
  methods: {
    //   点击提交传递给父组件
    submitForm() {
      let { ruleForm } = this;
    //   名称为空不能触发
      if (!ruleForm.name || !ruleForm.owner || !ruleForm.state) {
        this.$message({
          message: "请输入完整信息再提交!",
          type: "error",
        });
        return
      }
      this.$message({
          message: '恭喜你，新建成功!',
          type: 'success'
        });
      this.$emit("add", this.ruleForm);
    },
    // 返回上一页
    goBack(){
        this.$emit('back')
    }
  },
};
</script>

<style lang='scss' scoped>
::v-deep .el-input__inner{
    width: 600px;
    height: 40px;
}
</style>
